<template>
	<div class="boxmain">
		<h3>
			<div class="studenttitle">
				学生信息
				<div class="chooseschool">
					<div>
						选择查看学校
						<el-select v-model="searchschool" placeholder="全部" @change="schoolinfoselect">
							<el-option
							  key="全部"
							  label="全部"
							  value="全部">
							</el-option>
						  <el-option
						    v-for="item in schoolselect"
						    :key="item.gradeId"
						    :label="item.schoolName"
						    :value="item.gradeId">
						  </el-option>
						</el-select>
					</div>
					<div>
						查找准考证号
						<el-input v-model="zkzh" placeholder="准考证号" style="width:150px;"></el-input>
						<b class='el-icon-search' @click="zkzhclick"></b>
					</div>
					<div>
						查找姓名
						<el-input v-model="studentName" placeholder="学生姓名" style="width:150px;"></el-input>
						<b class='el-icon-search' @click="studentclick"></b>
					</div>
				</div>
			</div>
			<p>
				<!-- <el-button type="primary" @click="addstudent">添加考生</el-button> -->
				<el-button type="primary" style="background-color: red;border:solid 1px red" @click="batchDelete">批量删除</el-button>
			</p>
		</h3> 
		 <!-- @scroll="handleScroll" -->
		<div  class="table-container" ref="scrollContainer" style="overflow-y: auto;" :style="{height:tableheight+'px'}">
			<el-table
			    :data="tableData"
			    border
				:row-class-name="tableRowClassName"
				 ref="multipleTable"
				  @selection-change="handleSelectionChange"
				style="width: 100%">
				<el-table-column
				      type="selection"
				      width="55">
				</el-table-column>
			    <el-table-column
			      prop="userNumber"
			      label="学号"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="userName"
			      label="姓名"
			      width="80">
			    </el-table-column>
			    <el-table-column
			      prop="className"
			      label="班级"
				  width="80">
			    </el-table-column>
				<el-table-column
				  prop="userNumber"
				  label="准考证号"
				>
				</el-table-column>
				<el-table-column
				  prop="subject1"
				  label="选科1" width="70">
				</el-table-column>
				<el-table-column
				  prop="subject2"
				  label="选科2">
				</el-table-column>
				<el-table-column
				  prop="subject3"
				  label="选科3">
				</el-table-column>
				<el-table-column
				  label="日语">
				 <template slot-scope="scope">
					 {{scope.row.ry==0?'否':'是'}}
				</template>
				</el-table-column>
				<el-table-column
				  prop="address"
				  label="操作"
				  width="150">
				  <template slot-scope="scope">
				  <el-button @click="fixedstudent(scope.row)" type="text" size="small">修改</el-button>
				  <el-button @click="deletestudent(scope.row)" type="text" size="small">删除</el-button>
				</template>
				</el-table-column>
			  </el-table>
		</div>
		<div class="boxpagelist">
			<span class="colorGray">已选中{{multipleSelection.length}}条，</span>
			<span class="colorGray">共{{listTotal}}条数据</span>
			<el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="pageIndex"
			      :page-sizes="[20, 50, 100]"
			      :page-size="pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
				  background
			      :total="listTotal?listTotal:0">
			    </el-pagination>
		</div>
		<!-- <el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="pageIndex"
			:page-size="pageSize"
			layout="prev, pager, next, jumper"
			:total="listTotal">
		</el-pagination> -->
		<!-- 修改/添加学生信息 -->
		<div class="addExamMain" v-if="addstudentIshow">
			<div class="addExamContent">
				<h3>修改/添加学生信息</h3>
				<ul>
					<li>
						<span>学号</span>
						<el-input v-model="studentinfo.userNumber" placeholder="请输入内容"></el-input>
					</li>
					<li>
						<span>准考证号</span>
						<el-input v-model="studentinfo.userNumber" placeholder="请输入内容"></el-input>
					</li>
					<li>
						<span>姓名</span>
						<el-input v-model="studentinfo.userName" placeholder="请输入内容"></el-input>
					</li>
					<li>
						<span>选科1</span>
						<el-select v-model="studentinfo.subject1Id" placeholder="请选择">
						  <el-option
						    v-for="item in xuankexk"
						    :key="item.id"
						    :label="item.name"
						    :value="item.id">
						  </el-option>
						</el-select>
					</li>
					<li>
						<span>选科2</span>
						<el-select v-model="studentinfo.subject2Id" placeholder="请选择">
						  <el-option
						    v-for="item in xuankexk"
						    :key="item.id"
						    :label="item.name"
						    :value="item.id">
						  </el-option>
						</el-select>
					</li>
					<li>
						<span>选科3</span>
						<el-select v-model="studentinfo.subject3Id" placeholder="请选择">
						  <el-option
						    v-for="item in xuankexk"
						    :key="item.id"
						    :label="item.name"
						    :value="item.id">
						  </el-option>
						</el-select>
					</li>
					<li>
						<span>小语种</span>
						<el-select v-model="studentinfo.subject4Id" placeholder="请选择">
						  <el-option
						    v-for="item in xuanke4"
						    :key="item.id"
						    :label="item.name"
						    :value="item.id">
						  </el-option>
						</el-select>
					</li>
				</ul>
				<div class="groupbutton">
					<el-button type="primary" @click="studentinfosure">保存</el-button>
					<el-button type="primary" @click="addstudentIshow=false">返回</el-button> 
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {schoolList,studentInfoList,studentinfoDelete,studentinfoUpdate,navgetgrade,groupExamList} from '../../../api/scoreapi'
	export default{
		data(){
			return{
				searchschool:'全部',
				tableData: [],
				tableheight:'',
				addstudentIshow:false,
				studentinfo:{
					userName:'',
					userNumber:'',
					subject1Id:'',
					subject2Id:'',
					subject3Id:'',
					subject4Id:'',
					id:'',
					className:'',
					n4id:''
				},
				multipleSelection:[],
				schoolData:[],
				schoolselect:'',
				isLoading: false,
				hasMoreData: true,
				pageIndex:1,
				pageSize:20,
				loading: false,
			   allDataLoaded: false,
			   lastScrollY: 0 ,// 用于节流3
			   xuekelist:[],
			   listTotal:'',
			   zkzh:'',
			   studentName:''
			   // currentPagetotal:20
			}
		},
		mounted() {
			let newtitle = decodeURIComponent(this.$route.query.con)
			this.titlecontent = JSON.parse(newtitle)
			// 在组件挂载后获取屏幕高度
			this.getScreenHeight();
			//在窗口大小变化时更新屏幕高度，可以监听window的resize事件
			window.addEventListener('resize', this.getScreenHeight);
			this.schoolclick(JSON.parse(this.$route.query.con).n5Id)
			this.studentinfolistclick()
			this.xuekeclick(JSON.parse(this.$route.query.con).n5Id)
			localStorage.setItem('menuState', 2);
		},
		methods: {
			// 处理每页条数变化
			handleSizeChange(val){
				this.pageSize = val
				this.studentinfolistclick()
			},
			// 处理当前页码变化
			handleCurrentChange(val){
				this.pageIndex = val
				this.studentinfolistclick()
			},
			// calculateIsLastPage() {
			//   const lastPage = Math.ceil(this.listTotal / this.pageSize);
			//   const isLastPage = this.pageIndex === lastPage;
			//   this.studentinfolistclick()
			//   if(isLastPage){
			// 	  this.currentPagetotal = this.listTotal
			//   }else{
			// 	 this.currentPagetotal = this.pageSize*this.pageIndex
			//   }
			//   // 根据isLastPage的值做相应处理
			// },
			//获取学科列表
			xuekeclick(areaid){
				let params={
					ntype:6,
					id:areaid
				}
				navgetgrade(params).then(res=>{
					if(res.code==0){
						this.xuekelist = res.data
						this.xuankexk = res.data.filter(item=>item.name=='物理'||item.name=='历史'||item.name=='化学'||item.name=='地理'||item.name=='生物'||item.name=='政治')
						this.xuanke4 = res.data.filter(item=>item.name=='英语'||item.name=='日语')
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
		    getScreenHeight() {
		      // 获取屏幕高度并更新data中的screenHeight
		      this.tableheight = parseInt(window.innerHeight-310); 
		    },
			//创建学校
			addstudent(){
				this.addstudentIshow = true
			},
			//修改学校
			fixedstudent(con){
				this.addstudentIshow = true
				this.studentinfo.id = con.id
				this.studentinfo.userName=con.userName
				this.studentinfo.userNumber = con.userNumber
				this.studentinfo.subject1Id = con.subject1Id
				this.studentinfo.subject2Id = con.subject2Id
				this.studentinfo.subject3Id = con.subject3Id
				this.studentinfo.className=con.className
				this.studentinfo.n4id=this.titlecontent.n4Id
				if(con.ry==1){
					let yyid = this.xuanke4.filter(item=>item.name=='日语')
					this.studentinfo.subject4Id = yyid[0].id
				}else{
					let yyid = this.xuanke4.filter(item=>item.name=='英语')
					this.studentinfo.subject4Id = yyid[0].id
				}
				
			},
			//保存
			studentinfosure(){
				console.info(this.studentinfo)
				studentinfoUpdate(this.studentinfo).then(res=>{
					if(res.code==0){
						this.addstudentIshow = false
						this.studentinfolistclick()
						this.$message({
						  message: '修改成功',
						  type: 'success'
						});
						this.studentinfo={
							userName:'',
							userNumber:'',
							subject1Id:'',
							subject2Id:'',
							subject3Id:'',
							subject4Id:'',
							id:'',
							className:'',
							n4id:''
						}
					}else{
						this.$message({
						  message: res.msg,
						  type: 'error'
						});
					}
				})
			},
			// 返回
			studentinfoback(){
				this.addstudentIshow = false
				this.studentinfo={
					userName:'',
					userNumber:'',
					subject1Id:'',
					subject2Id:'',
					subject3Id:'',
					subject4Id:'',
					id:'',
					className:'',
					n4id:''
				}
			},
			//删除学校
			deletestudent(con){
				let params={
					ids:[con.id]
				}
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					studentinfoDelete(params).then(res=>{
						if(res.code==0){
							this.studentinfolistclick()
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}else{
							this.$message({
								type: 'error',
								message: res.msg
							});
						}
					})
				  
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
				
			},
			//table各色换行
			tableRowClassName({row, rowIndex}) {
				return rowIndex % 2 === 0 ? 'warning-row' : 'success-row'
			},
			// 批量删除
			batchDelete(){
				console.info(this.multipleSelection)
				let newarray = this.multipleSelection.map(item=>item.id)
				let params={
					ids:newarray
				}
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					studentinfoDelete(params).then(res=>{
						if(res.code==0){
							this.studentinfolistclick()
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}else{
							this.$message({
								type: 'error',
								message: res.msg
							});
						}
					})
				  
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				})
			},
			// 获取学校列表
			schoolclick(id){
				let params={n5Id:id,pageIndex:1,pagesize:500}
				schoolList(params).then(res=>{
					if(res.code==0){
						this.schoolData = res.data.groupPageList
						this.schoolselect = res.data.groupPageList
						if(this.searchschool!=''&&this.searchschool!='全部'){
							this.schoolData = res.data.groupPageList.filter((item)=>item.schoolName==this.searchschool)
						}
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			},
			//获取学生列表
			studentinfolistclick(){
				let params={
					navId:this.titlecontent.n5Id,
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					groupId:this.searchschool=='全部'||this.searchschool==''?undefined:this.searchschool,
					stuNameOrExamNo: this.zkzh?this.zkzh:undefined,
					studentName:this.studentName?this.studentName:undefined,
				}
				studentInfoList(params).then(res=>{
					this.listTotal = res.data.total
					this.tableData  = res.data.userResponseList
				})
			},
			schoolinfoselect(val){
				this.searchschool = val
				this.pageIndex = 1
				this.studentinfolistclick()
			},
			zkzhclick(){
				this.tableData=[]
				this.pageIndex=1
				this.studentinfolistclick()
			},
			studentclick(){
				this.tableData=[]
				this.pageIndex=1
				this.studentinfolistclick()
			}
		},
		beforeDestroy() {
			// 在组件销毁前移除事件监听器，避免内存泄漏
			window.removeEventListener('resize', this.getScreenHeight);
			this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll)
		},
	}
</script>

<style scoped>
	.boxmain h3{
		font-size:18px;
		display: flex;
		justify-content: space-between;
	}
	.boxmain h3 >>> .el-button{
		background:#165DFF
	}
	.boxmain{
		padding:30px;
	}
	.addstudent{
		display: flex;
		justify-content: space-between;
		padding-bottom:15px;
		font-size:18px;
		font-weight:bold;
	}
	.addstudent b{
		font-weight:normal;
		color:#1664FF;
		cursor: pointer;
		font-size:14px;   
	}
	.chooseschool{
		display: flex;
		align-items: center;
		font-size:14px;
		font-weight:normal;
		margin-left:26px;
		
	}
	.chooseschool >>> .el-select{
		margin-left:10px;
	}
	.chooseschool div{
		display: flex;
		align-items: center;
		position:relative;
		margin-right:20px;
	}
	.chooseschool div:last-child{
		margin-right:0;
		margin-left:0
	}
	.chooseschool div >>> .el-input{
		width:133px;
		margin-left:20px;
	}
	.chooseschool div b{
		position:absolute;
		right:38px;
		top:50%;
		transform: translateY(-50%);
		cursor: pointer;
	}
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:1;
	}
	.addExamContent{
		width: 600px;
		height: 600px;
		position: fixed;
		background:#fff;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding:10px 0 30px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:15px;
	}
	.addExamContent ul li span{
		font-size:16px;
		display: flex;
		align-items: center;
		width:100px;
		justify-content: left;
	}
	.addExamContent ul li span i{
		font-style:normal;
		color:red;
		padding-left:5px;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>> .el-input,.addExamContent ul li >>> .el-textarea{
		width:350px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:30px;
	}
	.groupbutton >>> .el-button{
		background:#165DFF;
		width:100px;
		margin-right:20px;
	}
	.boxmain >>> .el-table .warning-row {
	    background: rgb(243, 247, 255);
	}
	.boxmain >>> .el-table .success-row {
	    background:#fff;
	}
	.boxmain >>> .el-table .el-table__header-wrapper thead th {
	  background-color:rgb(220, 231, 255); /* 设置你想要的背景颜色 */
	  color: #000000; /* 设置你想要的文字颜色 */
	}
	.table-container {
	    overflow-y: auto;
	    margin: 20px 0;
	}
	.studenttitle{
		display: flex;
		align-items: center;
	}
	.boxpagelist{
			  display: flex;
			  align-items: center;
	}
	.boxpagelist >>> .el-pagination__total{
			  display: none !important;
	}
	.colorGray{
			  font-size:12px;
			  color:#999;
	}
	.boxpagelist >>> .el-pagination__jump{
			  color:#999;
			  font-size:12px;
	}
	.boxpagelist >>> .el-pagination__sizes .boxpagelist >>> .el-input .boxpagelist >>> .el-input__inner{
			  font-size:12px;
	}
	.boxpagelist >>> .el-pagination.is-background  .boxpagelist >>> .el-pager li:not(.disabled).active{
			 background-color:#1664FF !important
	}
</style>